<template>
  <view class="person-data p-32rpx flex-sb-center bg-#fff"
    :class="[{ 'dark-color': themeConfig.theme === 'dark' }]"
    @click="handleClick(data)"
  >
    <!-- 头像 -->
    <base-img-box :size="144" :round="144" :imgSrc="data.photoUrl" :thumbnailPreUrl="data.thumbnailPreUrl" />

    <!-- 文字信息 -->
    <view class="font-size-24rpx w-528rpx">
      <view class="flex items-end">
        <view class="inline-block align-bottom">
          <text class="mr-12rpx px-12rpx py-2rpx rounded-full font-size-20rpx color-#fff bg-linear-5">专属红娘</text>
          <view class="font-size-28rpx font-600 ellipsis inline-block max-w-110rpx align-bottom leading-32rpx">
            {{ data.name || '--' }}
          </view>
          <text class="ml-12rpx font-size-24rpx color-#9C6DEF" v-if="data.no">ID:{{ data.no }}</text>
          <view class="ml-12rpx color-#666 ellipsis inline-block max-w-200rpx align-bottom">
            {{ `${data.gender == '0' ? '男' : '女'}` }}·{{ calculateAge(data.birthDate) }}岁
          </view>
        </view>
        <view class="inline-block ml-a color-#9C6DEF align-bottom">联系红娘</view>
      </view>

      <view class="mt-10rpx flex-sb-center">
        <view class="w-259rpx">
          <view class="flex-a-center">
            <i class="iconfont icon-dingwei inline-block font-size-24rpx mr-6rpx"></i>
            <view class="inline-block ellipsis w-200rpx">{{ data.cityName }}{{ data.districtName }}</view>
          </view>
          <view class="mt-6rpx ellipsis">擅长: {{ data.expertise || '--' }}</view>
          <!-- <view class="mt-6rpx ellipsis">从业年限：{{ calculateAge(data.entryDate) }}年</view> -->
        </view>

        <view class="w-259rpx">
          <!-- <view class="flex-a-center">
            <i class="iconfont icon-bodadianhua inline-block font-size-24rpx mr-6rpx"></i>
            <view class="inline-block ellipsis w-200rpx">{{ data.contactPhone || '--' }}</view>
          </view> -->
          <view class="mt-6rpx ellipsis">从业年限：{{ calculateAge(data.entryDate) }}年</view>
          <view class="mt-6rpx ellipsis">职级：{{ data.positionLevelName || '--' }}</view>
        </view>
      </view>

      <!-- <view class="mt-6rpx ellipsis w-full">擅长: {{ data.expertise || '--' }}</view> -->
    </view>
  </view>
  <view class="border-1px"></view>
</template>

<script lang="ts" setup>
import baseImgBox from "@/components/base/base-img-box.vue";
import { useThemeStore } from "@/store";
import { calculateAge } from "@/utils";

// 主题颜色
const { themeConfig } = useThemeStore();
const emit = defineEmits(['handleClick']);
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
})

const handleClick = (data: any) => {
  emit('handleClick', data);
}
</script>

<script lang="ts">
export default {
  // 微信小程序开启样式穿透
  options: { styleIsolation: "shared" },
};
</script>

<style lang="scss" scoped>
</style>
